var Content=React.createClass({
	getInitialState:function(){
		return {
			contentData:null
		}
	},
	render:function(){
		var options=this.props.options,
			socialAccount=options.socialAccount,
			appId=socialAccount.app_id,
			Plan=typeof plan!='undefined'?plan:null,
			maxWallNumber=(Plan && Plan.features) ? Plan.features.max_wall_count : 1,
			contentData=this.state.contentData || [
				{
					id:1,
					name:'入门版',
					price:0,
                    payPer:null,
					features:[
                        {
                            name:'跨屏朋友圈',
                            features:[
                                {name:'管理微信公众号数量',value:'1个'},
                                {name:'创建朋友圈的数量',value:'1个'},
                                {name:'隐藏Parllay LOGO',value:false}
                            ]
                        },
                        {
                            name:'大屏互动时间',
                            features:[
                                {name:'大屏更新时间',value:'30分钟'},
                                {name:'大屏实时更新',value:false}
                            ]
                        },
                        {
                            name:'大屏展示',
                            features:[
                                {name:'支持大屏幕数',value:'1个'},
                                {name:'扩展大屏幕',value:false},
                                {name:'单屏图文互动数',value:'1个'},
                                {name:'分屏图文互动数',value:'1个'},
                                {name:'自定义背景',value:false}
                            ]
                        },
                        {
                            name:'手机展示',
                            features:[
                                {name:'互动效果数量',value:'1个'},
                                {name:'发送图文',value:true},
                                {name:'分权发送图片',value:false},
                                {name:'点赞',value:true},
                                {name:'评论',value:true},
                                {name:'链接',value:true}
                            ]
                        },
                        {
                            name:'定制互动样式',
                            features:[
                                {name:'手机互动',value:false},
                                {name:'大屏互动',value:false}
                            ]
                        },
                        {
                            name:'图文审核',
                            features:[
                                {name:'人工审核',value:true}
                            ]
                        },
                        {
                            name:'高级分析报表',
                            features:[
                                {name:'大屏展示数据高级分析',value:false},
                                {name:'大屏展示数据分析',value:false},
                                {name:'手机社区数据分析',value:false}
                            ]
                        },
                        {
                            name:'技术支持',
                            features:[
                                {name:'在线客服',value:'邮件+电话'},
                                {name:'专职客户经理',value:false}
                            ]
                        }
                    ],
					description:'这是一个免费的版本，您可以试用部分功能',
                    bgColor:'bg-green'
				},
				{
					id:2,
					name:'营销版',
					price:2400,
                    payPer:'年',
					features:[
                        {
                            name:'跨屏朋友圈',
                            features:[
                                {name:'管理微信公众号数量',value:'1个'},
                                {name:'创建朋友圈的数量',value:'1个'},
                                {name:'隐藏Parllay LOGO',value:true}
                            ]
                        },
                        {
                            name:'大屏互动时间',
                            features:[
                                {name:'大屏更新时间',value:'15分钟'},
                                {name:'大屏实时更新',value:'￥300/天'}
                            ]
                        },
                        {
                            name:'大屏展示',
                            features:[
                                {name:'支持大屏幕数',value:'2个'},
                                {name:'扩展大屏幕',value:false},
                                {name:'单屏图文互动数',value:'7个'},
                                {name:'分屏图文互动数',value:'1个'},
                                {name:'自定义背景',value:true}
                            ]
                        },
                        {
                            name:'手机展示',
                            features:[
                                {name:'互动效果数量',value:'1个'},
                                {name:'发送图文',value:true},
                                {name:'分权发送图片',value:false},
                                {name:'点赞',value:true},
                                {name:'评论',value:true},
                                {name:'链接',value:true}
                            ]
                        },
                        {
                            name:'定制互动样式',
                            features:[
                                {name:'手机互动',value:false},
                                {name:'大屏互动',value:false}
                            ]
                        },
                        {
                            name:'图文审核',
                            features:[
                                {name:'人工审核',value:true}
                            ]
                        },
                        {
                            name:'高级分析报表',
                            features:[
                                {name:'大屏展示数据高级分析',value:false},
                                {name:'大屏展示数据分析',value:true},
                                {name:'手机社区数据分析',value:true}
                            ]
                        },
                        {
                            name:'技术支持',
                            features:[
                                {name:'在线客服',value:'邮件+电话'},
                                {name:'专职客户经理',value:false}
                            ]
                        }
                    ],
					description:'基础的营销版本，拥有实时互动能力等功能',
                    bgColor:'bg-teal'
				},
                {
					id:3,
					name:'营销增强版',
					price:7200,
                    payPer:'年',
					features:[
                        {
                            name:'跨屏朋友圈',
                            features:[
                                {name:'管理微信公众号数量',value:'1个'},
                                {name:'创建朋友圈的数量',value:'3个'},
                                {name:'隐藏Parllay LOGO',value:true}
                            ]
                        },
                        {
                            name:'大屏互动时间',
                            features:[
                                {name:'大屏更新时间',value:'5分钟'},
                                {name:'大屏实时更新',value:'￥500/天'}
                            ]
                        },
                        {
                            name:'大屏展示',
                            features:[
                                {name:'支持大屏幕数',value:'5个(最多10个)'},
                                {name:'扩展大屏幕',value:'5个(￥1000/个)'},
                                {name:'单屏图文互动数',value:'7个+定期更新'},
                                {name:'分屏图文互动数',value:'8个+定期更新'},
                                {name:'自定义背景',value:true}
                            ]
                        },
                        {
                            name:'手机展示',
                            features:[
                                {name:'互动效果数量',value:'3个'},
                                {name:'发送图文',value:true},
                                {name:'分权发送图片',value:true},
                                {name:'点赞',value:true},
                                {name:'评论',value:true},
                                {name:'链接',value:true}
                            ]
                        },
                        {
                            name:'定制互动样式',
                            features:[
                                {name:'手机互动',value:true},
                                {name:'大屏互动',value:true}
                            ]
                        },
                        {
                            name:'图文审核',
                            features:[
                                {name:'人工审核',value:true}
                            ]
                        },
                        {
                            name:'高级分析报表',
                            features:[
                                {name:'大屏展示数据高级分析',value:true},
                                {name:'大屏展示数据分析',value:true},
                                {name:'手机社区数据分析',value:true}
                            ]
                        },
                        {
                            name:'技术支持',
                            features:[
                                {name:'在线客服',value:'邮件+电话'},
                                {name:'专职客户经理',value:false}
                            ]
                        }
                    ],
					description:'高级的营销版本，拥有最全面的功能',
                    bgColor:'bg-light-blue'
				},
                {
					id:4,
					name:'活动版',
					price:1500,
                    payPer:'天',
					features:[
                        {
                            name:'跨屏朋友圈',
                            features:[
                                {name:'管理微信公众号数量',value:'1个'},
                                {name:'创建朋友圈的数量',value:'1个'},
                                {name:'隐藏Parllay LOGO',value:true}
                            ]
                        },
                        {
                            name:'大屏互动时间',
                            features:[
                                {name:'大屏更新时间',value:'实时'},
                                {name:'大屏实时更新',value:'￥1500/天'}
                            ]
                        },
                        {
                            name:'大屏展示',
                            features:[
                                {name:'支持大屏幕数',value:'5个',extra:'(最多10个，仅活动当天)'},
                                {name:'扩展大屏幕',value:'￥1000/个',extra:'(仅活动当天)'},
                                {name:'单屏图文互动数',value:'7个',extra:'(仅活动当天)'},
                                {name:'分屏图文互动数',value:'8个',extra:'(仅活动当天)'},
                                {name:'自定义背景',value:true,extra:'(仅活动当天)'}
                            ]
                        },
                        {
                            name:'手机展示',
                            features:[
                                {name:'互动效果数量',value:'1个'},
                                {name:'发送图文',value:true},
                                {name:'分权发送图片',value:false},
                                {name:'点赞',value:true},
                                {name:'评论',value:true},
                                {name:'链接',value:true}
                            ]
                        },
                        {
                            name:'定制互动样式',
                            features:[
                                {name:'手机互动',value:false},
                                {name:'大屏互动',value:false}
                            ]
                        },
                        {
                            name:'图文审核',
                            features:[
                                {name:'人工审核',value:true}
                            ]
                        },
                        {
                            name:'高级分析报表',
                            features:[
                                {name:'大屏展示数据高级分析',value:true,extra:'(仅活动当天)'},
                                {name:'大屏展示数据分析',value:true,extra:'(仅活动当天)'},
                                {name:'手机社区数据分析',value:true,extra:'(仅活动当天)'}
                            ]
                        },
                        {
                            name:'技术支持',
                            features:[
                                {name:'在线客服',value:'邮件+电话'},
                                {name:'专职客户经理',value:true,extra:'(仅活动当天)'}
                            ]
                        }
                    ],
					description:'此版本适用于展会等短期活动，拥有非常全面的大屏展示能力',
                    bgColor:'bg-yellow'
				}
			];

		return (
			<div>
				<section className="content-header">
					<h1>跨屏朋友圈购买计划选择<small>{socialAccount.name}</small></h1>
				</section>
				<div className="content">
		            <div className="row">
		                <div className="col-md-12">
		                    {contentData.map(function(i,index){
		                    	return <PlanItem key={index} data={i} />
		                    })}
		                </div>
		            </div>
		        </div>
	        </div>
		)
	}
});

var PlanItem = React.createClass({
    selectPlan:function(){
        var data=this.props.data;

        ReactDOM.render(<RealTimeSetting title={"购买"+data.name} callback={this.payForPlan} data={{id:data.id,dateMode:'yearly'}} />,document.getElementById('modal'))
    },
    payForPlan:function(param,callback){
		var self=this;
		console.log(param);
        return;
		$.ajax({
			type:'get',
			url:'/purchase?'+$.param(param),
			dataType:'json',
			success:function(data){
				if(data.success){
					self.setState({
						isRealtimeOpen:true
					},function(){
						self.startDate=param.start_date;
						self.endDate=param.end_date;

						self.realtimeInterval()
					});
					callback(true,data.data)
				}else{
					callback(false,data.error)
				}
			},
			error:function(){
				callback(false,'购买失败，请检查网络连接')
			}
		})
	},
    render:function(){
        var data=this.props.data,
            selectPlan=this.selectPlan;

        return (
            <div className="col-sm-6 col-md-3 plan-item">
                <div className="thumbnail">
                    <div className={"jumbotron "+data.bgColor}>
                        <h3 className="text-center">{data.name}</h3>
                        <p className="plan-item-mask text-center">{data.price?'￥'+data.price+'/'+data.payPer:'免费'}</p>
                    </div>
                    <ul className="list-group">
                        {data.features.map(function(feature,index){
                            return <li className="list-group-item" key={index}>
                                <h4 className="plan-featrue-title">{feature.name}</h4>
                                {feature.features.map(function(subFeature,subIndex){
                                    return <p key={subIndex}>
                                        {subFeature.name}
                                        <span className="pull-right">
                                            {typeof subFeature.value=='boolean'?<i className={"fa fa-"+(subFeature.value?'check text-green':'close text-red')}></i>:subFeature.value}
                                            {subFeature.extra || null}
                                        </span>
                                    </p>
                                })}
                            </li>
                        })}
                        <li className="list-group-item">
                            <h4 className="plan-featrue-title">
                                授权使用费用：
                                <span className="pull-right">{data.price?'￥'+data.price+'/'+data.payPer:'免费'}</span>
                            </h4>
                        </li>
                    </ul>
                    <div className="caption plan-item-footer">
                        {data.price?<p><a href="javascript:void(0)" onClick={function(){selectPlan(data.id)}} className="btn btn-block btn-primary" role="button">立即购买</a></p>:null}
                    </div>
                </div>
            </div>
        )
    }
})